<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频管理 - Shioa</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe', 
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a'
},
secondary: '#64748b',
accent: {
green: '#10b981',
purple: '#8b5cf6',
orange: '#f59e0b',
red: '#ef4444',
blue: '#06b6d4'
},
success: '#10b981',
warning: '#f59e0b',
danger: '#ef4444',
info: '#06b6d4'
},
borderRadius: {
'button': '8px'
},
fontFamily: {
'sans': ['Inter', 'ui-sans-serif', 'system-ui']
},
boxShadow: {
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04)',
'strong': '0 10px 40px -10px rgba(0, 0, 0, 0.1), 0 2px 10px -2px rgba(0, 0, 0, 0.04)'
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
min-height: 1024px;
}
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; }
.status-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.video-thumbnail {
    width: 120px;
    height: 68px;
    object-fit: cover;
}
.video-duration {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen font-sans">
    <!-- 状态提示栏 -->
    <div id="status-bar" class="hidden status-bar bg-blue-500 text-white p-3 text-center">
        <div class="flex items-center justify-center">
            <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
            <span id="status-text">正在加载...</span>
        </div>
    </div>

    <!-- Toast 容器 -->
    <div id="toast-container" class="toast-container space-y-2"></div>

    <!-- 导航由 shared-navigation.js 统一管理，实现真正的组件复用 -->

    <!-- 面包屑导航 -->
    <div class="max-w-[1440px] mx-auto px-6 py-4">
        <nav class="flex items-center gap-2 text-sm text-gray-500">
            <a href="index.html" class="hover:text-primary-600 transition-colors">
                <i class="fas fa-home"></i>
            </a>
            <span class="mx-2">/</span>
            <span class="text-gray-700">视频管理</span>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <main class="max-w-[1440px] mx-auto px-6 pb-8">



        <!-- 视频列表 -->
        <div class="bg-white rounded-xl shadow-medium border border-gray-100 overflow-hidden">
            <div class="p-6 border-b border-gray-100">
                <!-- 搜索和功能区域 -->
                <div class="flex flex-col gap-4">
                    <!-- 第一行：搜索框 -->
                    <div class="w-full">
                        <div class="relative">
                            <input type="text" id="search-videos" placeholder="搜索视频标题、描述或标签..." 
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-button focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none transition-all">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    
                    <!-- 第二行：筛选和操作区域 -->
                    <div class="flex flex-col xl:flex-row items-start xl:items-center gap-3">
                        <!-- 基础筛选 -->
                        <div class="flex flex-col sm:flex-row items-start sm:items-center gap-2">
                            <select id="filter-category" class="px-3 py-2 border border-gray-300 rounded-button focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none text-sm min-w-[140px]" aria-label="按频道分类筛选">
                                <option value="">所有频道分类</option>
                            </select>

                            <select id="filter-channel" class="px-3 py-2 border border-gray-300 rounded-button focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none text-sm min-w-[140px]" aria-label="选择频道">
                                <option value="">所有频道</option>
                            </select>
                        </div>
                        
                        <!-- 时间段和排序控件 -->
                        <div class="flex items-center gap-2 bg-gray-50 px-3 py-2 rounded-button border border-gray-300">
                            <label class="text-xs text-gray-600 whitespace-nowrap">时间段:</label>
                            
                            <!-- 时间段选择 -->
                            <select id="time-period" class="px-2 py-1 border border-gray-200 rounded text-xs focus:border-primary-500 focus:ring-1 focus:ring-primary-200 focus:outline-none min-w-[80px]">
                                <option value="all">全部时间</option>
                                <option value="1">最近1天</option>
                                <option value="3">最近3天</option>
                                <option value="7" selected>最近7天</option>
                                <option value="30">最近30天</option>
                                <option value="90">最近90天</option>
                                <option value="365">最近1年</option>
                            </select>
                            
                            <span class="text-xs text-gray-400">|</span>
                            <label class="text-xs text-gray-600 whitespace-nowrap">排序:</label>
                            
                            <!-- 排序规则 -->
                            <select id="sort-rule" class="px-2 py-1 border border-gray-200 rounded text-xs focus:border-primary-500 focus:ring-1 focus:ring-primary-200 focus:outline-none min-w-[80px]">
                                <option value="published_at:desc" selected>最新发布</option>
                                <option value="published_at:asc">最早发布</option>
                                <option value="view_count:desc">播放量最高</option>
                                <option value="view_count:asc">播放量最低</option>
                                <option value="like_count:desc">点赞最多</option>
                                <option value="like_count:asc">点赞最少</option>
                                <option value="comment_count:desc">评论最多</option>
                                <option value="comment_count:asc">评论最少</option>
                            </select>
                        </div>
                        
                        <!-- 操作按钮组 -->
                        <div class="flex items-center gap-2 ml-auto">
                            <button onclick="clearFilters()" class="px-3 py-2 text-gray-600 hover:text-gray-800 border border-gray-300 rounded-button hover:bg-gray-50 transition-colors" title="清除筛选">
                                <i class="fas fa-times"></i>
                            </button>
                            
                            <button onclick="refreshVideos()" class="px-3 py-2 text-gray-600 hover:text-primary-600 hover:bg-primary-50 rounded-button transition-colors" title="刷新列表">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                            
                            <button onclick="syncAllVideos()" class="flex items-center gap-2 bg-gradient-to-r from-green-500 to-green-600 text-white px-3 py-2 rounded-button font-medium shadow-lg hover:from-green-600 hover:to-green-700 hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 text-sm">
                                <i class="fas fa-sync-alt text-xs"></i>
                                同步
                            </button>
                            
                            <button onclick="cleanShortVideos()" class="flex items-center gap-2 bg-gradient-to-r from-red-500 to-red-600 text-white px-3 py-2 rounded-button font-medium shadow-lg hover:from-red-600 hover:to-red-700 hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 text-sm">
                                <i class="fas fa-trash text-xs"></i>
                                清理短视频
                            </button>
                            
                            <div class="text-sm text-gray-500 ml-2">
                                共 <span id="videos-count">0</span> 个
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 视频卡片网格 -->
            <div id="videos-grid" class="p-6">
                <!-- 加载状态 -->
                <div class="flex flex-col items-center justify-center py-12">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mb-4"></div>
                    <p class="text-gray-500">正在加载视频数据...</p>
                </div>
            </div>
            
            <!-- 分页 -->
            <div id="pagination" class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
                <div class="text-sm text-gray-500">
                    显示第 <span id="page-start">1</span> - <span id="page-end">20</span> 条，共 <span id="total-records">0</span> 条记录
                </div>
                <div class="flex items-center gap-2">
                    <button id="prev-page" onclick="changePage(-1)" disabled class="px-3 py-2 border border-gray-300 rounded-button text-sm text-gray-500 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                        <i class="fas fa-chevron-left mr-1"></i>上一页
                    </button>
                    <div id="page-numbers" class="flex items-center gap-1">
                        <!-- 页码按钮将在这里动态生成 -->
                    </div>
                    <button id="next-page" onclick="changePage(1)" disabled class="px-3 py-2 border border-gray-300 rounded-button text-sm text-gray-500 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                        下一页 <i class="fas fa-chevron-right ml-1"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 视频详情模态框 -->
    <div id="videoDetailModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-2xl shadow-strong max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-95 opacity-0" id="videoModalContent">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center">
                            <i class="fas fa-play text-white"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-800">视频详情</h3>
                            <p class="text-sm text-gray-600">查看视频详细信息和数据</p>
                        </div>
                    </div>
                    <button onclick="closeVideoDetailModal()" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                        <i class="fas fa-times text-lg"></i>
                    </button>
                </div>
            </div>
            
            <div id="video-detail-content" class="p-6">
                <!-- 视频详情内容将在这里动态加载 -->
            </div>
        </div>
    </div>

    <!-- 同步视频模态框 -->
    <div id="syncVideoModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-2xl shadow-strong max-w-lg w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="syncModalContent">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center">
                        <i class="fas fa-sync-alt text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800">同步视频数据</h3>
                        <p class="text-sm text-gray-600">从YouTube获取最新的视频数据</p>
                    </div>
                </div>
            </div>
            
            <div class="p-6">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">回溯天数</label>
                    <select id="sync-days-back" class="w-full px-3 py-2 border border-gray-300 rounded-button focus:border-primary-500 focus:ring-2 focus:ring-primary-200 focus:outline-none">
                        <option value="1">最近 1 天</option>
                        <option value="3" selected>最近 3 天</option>
                        <option value="7">最近 7 天</option>
                        <option value="10">最近 10 天</option>
                        <option value="15">最近 15 天</option>
                        <option value="30">最近 30 天</option>
                    </select>
                    <p class="text-sm text-gray-500 mt-1">选择同步多少天内发布的视频</p>
                </div>
                
                <!-- 优化选项 -->
                <div class="mb-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-3">
                        <label class="flex items-center">
                            <input type="checkbox" id="use-optimization" checked class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm font-medium text-gray-700">启用性能优化 🚀</span>
                        </label>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            推荐
                        </span>
                    </div>
                    
                    <div id="optimization-settings" class="space-y-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-600 mb-1">并行线程数</label>
                            <select id="max-workers" class="w-full px-2 py-1 border border-blue-300 rounded text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-200 focus:outline-none">
                                <option value="3">3 线程（保守）</option>
                                <option value="5" selected>5 线程（推荐）</option>
                                <option value="7">7 线程（积极）</option>
                                <option value="10">10 线程（最大）</option>
                            </select>
                        </div>
                        
                        <div class="text-xs text-blue-600">
                            <div class="flex items-center mb-1">
                                <i class="fas fa-lightning-bolt mr-1"></i>
                                <span>优化特性：并行处理、智能缓存、批量操作</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-clock mr-1"></i>
                                <span>预计提升：5-50倍同步速度</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="sync-progress" class="hidden mb-4">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
                        <span class="text-sm text-gray-600">正在同步视频数据...</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="sync-progress-bar" class="bg-green-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                    </div>
                </div>
                
                <div id="sync-result" class="hidden"></div>
            </div>
            
            <div class="p-6 border-t border-gray-100 bg-gray-50/50 flex justify-end gap-3">
                <button onclick="closeSyncVideoModal()" class="px-5 py-2.5 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-button font-medium transition-all duration-200">取消</button>
                <button id="start-sync-btn" onclick="startVideoSync()" class="px-5 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 rounded-button font-medium shadow-lg hover:shadow-xl transition-all duration-200">开始同步</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="js/env.js"></script>
    <script>
    // 设置全局API配置
    window.API_BASE_URL = API_BASE_URL;
    </script>
    <script src="js/config.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/api.js"></script>
    <script src="js/video-management.js"></script>
    <script src="js/shared-navigation.js"></script>
</body>
</html>
